<template>
  <div class="vendor-search">
    <el-form :inline="true" :model="searchForm" :rules="rules" ref="searchForm" label-width="100px">
      <el-form-item label="商家名称" prop="name">
        <el-input v-model="searchForm.name"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-col :span="11">
          <el-form-item prop="startTime">
            <el-date-picker type="date" placeholder="开始日期" v-model="searchForm.startTime" format="yyyy-MM-dd hh:mm:ss"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="endTime">
            <el-date-picker type="date" placeholder="结束日期" v-model="searchForm.endTime" format="yyyy-MM-dd hh:mm:ss"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSearchForm('searchForm')">查询</el-button>
        <el-button @click="resetForm('searchForm')">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
  import Hub from '@/assets/utils/Hub'
  export default {
    data () {
      return {
        searchForm: {
          name: '',
          startTime: '',
          endTime: ''
        },
        rules: {
          name: [
            {max: 10, require: true, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      submitSearchForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              'vendorName': this.searchForm.name,
              'startTime': this.searchForm.startTime ? this.searchForm.startTime.Format('yyyy-MM-dd hh:mm:ss') : '',
              'endTime': this.searchForm.endTime ? this.searchForm.endTime.Format('yyyy-MM-dd hh:mm:ss') : ''
            }
            axios.post('/api/vendor/queryList', params).then((res) => {
              this.fullScreenLoading = false
              if (res.data.code === 9999) {
                Hub.$emit('searchResultShot', res.data.data.list, res.data.data.pageSize, res.data.data.total)
              }
            }).catch((err) => {
              console.log(err)
              this.$notify({
                title: 'warning',
                message: this.$createElement('i', {style: 'color: red'}, '网络错误！')
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    }
  }

</script>

<style lang="less">
  .vendor-search{
    margin-top: 20px;
  }
</style>
